<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        #webbg{
            position: fixed;
            /* z-index: -9; */
            opacity: 0.3;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right ,#009fff,#cc2f4b);
            /* background-size: 100%; */
        }
    </style>
    <!-- <script src="./OrbitControls.js"></script> -->
    <!-- <script src="../网页3dmin/other/js/three.js"></script> -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js"></script>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
    
</head>

<body>
    <div id="webbg"></div>
    <script>
        var scene = new THREE.Scene();

        var geom = new THREE.Geometry();
        var material = new THREE.ParticleBasicMaterial({
            size: 0.02,
            vertexColors: true
        });
        var n = 1200;
        for (var i = 0; i < 4000; i++) {
            var particle = new THREE.Vector3(
                (Math.random() - 0.5) * n,
                (Math.random() - 0.5) * n,
                (Math.random() - 0.5) * n
            );
            geom.vertices.push(particle);
            let color_ = Math.random();
            geom.colors.push(new THREE.Color(color_ *40, color_*10, color_ * 80.6));
            // geom.colors.push(new THREE.Color(color_ , color_, color_ *0.6));
        }
        var cloud = new THREE.ParticleSystem(geom, material);

        scene.add(cloud);
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300);
        scene.add(point);

        var ambient=new THREE.AmbientLight(0x444444);
        scene.add(ambient);

        var width = window.innerWidth;
        var height = window.innerHeight;
        var k = width / height;
        var s = 100;
        var camera = new THREE.OrthographicCamera(-s * k,s * k, s, -s, 1, 1000);
        // camera.position.set(200, 300, 200);
        camera.position.set(10, 30, 20);
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        // renderer.setClearColor(0x000000, 1);
        // renderer.setClearColor('rgba(135,206,250,0.5)',0.2);
        document.body.appendChild(renderer.domElement);
        // document.body.innerHTML= renderer.domELement;

        var controls = new THREE.OrbitControls(camera);
        let T0 = new Date();
        function render() {
            let T1 = new Date();
            let t = T1 - T0;
            T0 = T1;
            requestAnimationFrame(render);
            renderer.render(scene, camera);
            cloud.rotateY(0.0001*t);
            controls.addEventListener('change', render);

        }
        render();


    </script>
</body>

</html>